<template>
	<view>
		<view class="car-box flex-column" :class="{ 'bar-content': type == 1 }" :style="boxStyle">
			<template v-if="dataList.length">
				<view class="car-top-box flex-spb-cn">
					<text class="car-top__left">共{{ count }}件商品</text>
					<view class="car-top__right flex-cn" @click="clickManage">
						<template v-if="!isManage">
							<text class="qh-rt-single qh-rt-a-zu4420"></text>
							<text>管理</text>
						</template>
						<text v-else>完成</text>
					</view>
				</view>
				<view class="flex-column-100 car-goods-box">
					<qh-scroll-view parent-el-name=".car-goods-box" @init="initScroll" refresher-enabled
						@refresherrefresh="pullDownRefresh" :refresher-triggered="isRefresh"
						refresher-background="transparent">
						<view class="car-goods-content">
							<view class="car-goods-list flex-cn" v-for="(item, index) in dataList" :key="index"
								@touchstart="touchStart($event, item.id)" @touchmove="touchMove($event)"
								:style="moveId == item.id ? ('margin-left:-' + (moveWidth > 50 ? moveWidth : 0) + 'px') : ''">
								<!-- :style="moveId == item.id ? ('margin-left:-' + (moveWidth > 20 ? moveWidth : 0) + 'px') : ''"> -->
								<qh-radio v-model="item.checked" padding="20" class="car-goods-check"></qh-radio>
								<view @click="toDetail(item.goods_id)">
									<qh-goods-image :src="item.goods_img" size="200" radius="12"></qh-goods-image>
								</view>
								<view class="car-goods-list__right flex-row-100 flex-col-spb">
									<view class="car-goods-list__name text-ellipsis" @click="toDetail(item.goods_id)">
										{{ item.goods_name }}</view>
									<view style="color: #9e9e9e;font-size: 13px;" v-if="item.sku_name">{{ item.sku_name
										}}</view>
									<view class="car-goods-list__sku-box flex-spb-cn" v-if="item.attribute == 2"
										@click.stop="changeSku(index)">
										<text class="text-ellipsis">{{ item.sku_name }}</text>
										<text class="qh-rt-single qh-rt-a-zu4421 car-goods-list__sku-icon"></text>
									</view>
									<view class="flex-end-spb">
										<view class="car-goods-price-box" @click="toDetail(item.goods_id)">
											<view v-if="showPlusPrice(item)" class="flex-cn">
												<text class="plus-price-color">￥{{ item.plus_price }}</text>
												<text class="plus-price-icon">PLUS</text>
											</view>
											<view v-if="showVipPrice(item)" class="flex-cn">
												<text class="price-color">￥{{ item.shop_mem_price }}</text>
												<text class="vip-price-icon">VIP</text>
											</view>
											<view v-if="showOnlinePrice(item)" class="price-color">
												￥{{ item.online_price }}</view>
											<view class="flex-cn" v-if="item.rebate > 0">
												<view class="temperature-box">
													{{ item.rebate }}<text
														style="letter-spacing: 2rpx;margin-left: 2rpx;">福气值</text>
												</view>
												<!-- <text class="plus-price-color">￥</text>
												<text class="plus-price-color" style="font-size: 22rpx;"> {{ item.rebate }}</text>
												<text class="plus-price-icon">返福气值</text> -->
											</view>
										</view>
										<view class="car-num-box flex-cn">
											<text class="qh-rt-single qh-rt-a-zu4424 car-num-icon"
												@click="setDec(index)"></text>
											<input v-model="item.num" type="number" placeholder-class="pl"
												class="car-num-input" @blur="inputBlur($event, index)" maxlength="9"
												placeholder="1">
											<text class="qh-rt-single qh-rt-a-zu4423 car-num-icon"
												@click="setInc(index)"></text>
										</view>
									</view>
								</view>
								<view class="car-goods-del flex-cn-cn" @click.stop="
									toDel(index)">删除</view>
							</view>
						</view>
						<qh-loaded-tip v-if="dataList.length" text="已显示全部"></qh-loaded-tip>
					</qh-scroll-view>
				</view>
				<!-- 底部按钮 -->
				<view class="car-footer-box flex-spb-cn" :class="{ 'tabbar-page-bottom': type == 1 }"
					:style="footerStyle">
					<view style="display: flex;justify-content: space-between;width: 100%;">
						<qh-radio v-model="allChecked" @change="changeAllCheck" padding="20">
							<text class="car-footer__check-text" :class="{ 'checked': allChecked }">全选</text>
						</qh-radio>
						<view class="flex-cn">
							<view style="display: flex;flex-direction: column;">
								<view class="flex-end">
									<view class="car-footer-text">
										<text>{{ coupon > 0 ? '券后合计：' : '合计：' }}</text>
										<text class="price">￥</text>
									</view>
									<text class="car-footer-price">{{ checkedTotal }}</text>

								</view>

								<view style="display: flex;align-items: center;">
									<text v-if="rebateTotal > 0" style="color: #C39646;font-size: 22rpx;margin-right: 20rpx;">返福气值：{{
										rebateTotal }}</text>
									<text v-if="coupon > 0" style="color:red;font-size: 22rpx;">优惠 ：{{ coupon }}</text>
								</view>
							</view>

							<view v-show="!isManage">
								<login-and-register
									v-if="checkedCount > 0 && userInfo.platform_type == 2 && !userInfo.vid"
									:type="userInfo.login_state == 1 ? 4 : 3" @success="toSettlement">
									<view class="car-footer-btn">结算({{ totalLength }})</view>
								</login-and-register>
								<view v-else class="car-footer-btn" :class="{ 'disabled': checkedCount == 0 }"
									@click="toSettlement">
									结算({{
										totalLength }})</view>
							</view>
							<view v-show="isManage" style="background-color: #C39646;" class="car-footer-btn" :class="{ 'disabled': checkedCount == 0 }"
								@click="delGoods">
								删除({{
									totalLength }})
							</view>
						</view>
					</view>
				</view>
			</template>

			<scroll-view v-else-if="isLoadCarGoods" scroll-y="true" class="scroll-view tabbar-page-bottom"
				:show-scrollbar="false" @scrolltolower="getGoodsList">
				<view class="scroll-view-content">
					<!-- 空提示 -->
					<view class="empty-tip-box flex-col-cn-cn">
						<qh-image :src="emptyImageUrl" width="545" height="340" style="margin-top: 100rpx;"></qh-image>
						<text class="car-empty-tip">购物车是空的哦~</text>
						<text class="car-empty-sub-tip">生活不易去犒劳一下自己吧</text>
						<view class="car-empty-btn" @click="toHome">去逛逛</view>
					</view>
					<!-- 商品列表 -->
					<template v-if="goodsList.length">
						<view class="car-empty-title">你可能还会喜欢</view>
						<view class="goods-list-box flex-spb flex-wrap">
							<view class="goods-item flex-col-spb" v-for="(item, index) in goodsList" :key="index"
								@click="toDetail(item.goods_id)">

								<view>
									<qh-goods-image :src="item.path" size="336"
										radius="16rpx 16rpx 0 0"></qh-goods-image>
									<view class="goods-name">{{ item.goods_name }}</view>
								</view>

								<view class="flex-end-spb">
									<view class="goods-price-box">
										<view v-if="showPlusPrice(item)" class="flex-cn">
											<text class="plus-price-color">￥{{ item.plus_price }}</text>
											<text class="plus-price-icon">PLUS</text>
										</view>

										<view v-if="showVipPrice(item)" class="flex-cn">
											<text class="price-color">￥{{ item.shop_mem_price }}</text>
											<text class="vip-price-icon">VIP</text>
										</view>

										<view v-if="showOnlinePrice(item)" class="price-color">￥{{ item.online_price }}
										</view>

									</view>
									<text class="qh-rt-single qh-rt-tianjia add-car-icon"
										@click.stop="addToCar(index)"></text>
								</view>

							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
		<!-- 规格弹窗 -->
		<block v-if="showSelectSku">
			<choose-sku :sku="sku" :goodsinfo="goods" goodsType="1" @close="closeSku"></choose-sku>
		</block>
	</view>

</template>

<script>
const app = getApp().globalData;
import toDecimal from '@/utils/toDecimal.js';
import qhScrollMixin from "@/components/qh-scroll-view/mixins.js";
export default {
	mixins: [qhScrollMixin], // 使用mixin
	props: {
		type: {
			type: [String, Number],
			default: 1
		},
	},
	data() {
		return {
			coupon:0,
			rebateTotal: 0,//福气值返利
			count: 0,
			vipDiscount: 1,
			isManage: false,
			allChecked: false,
			checkedIds: [],
			checkIndexs: [],
			checkedCount: 0,
			dataList: [],
			isRefresh: false,
			showSelectSku: false,
			isLoadCarGoods: false,
			changeSkuIndex: '',
			goods: {},
			sku: {
				showChangeNum: false, //是否显示选择数量
				btnText: '确定', //按钮文字
			},

			delBtnWidth: uni.upx2px(136),
			moveId: '',
			moveStartX: 0,
			moveStartY: 0,
			moveWidth: 0,

			goodsList: [],
			isLoading: false,
			canLoad: true,
			goodsForm: {
				page: 1,
				limit: 10,
			},
			userInfo: {
				user_type: 1
			},
			totalLength: 0,//结算数量
		}
	},
	computed: {
		checkedTotal() {
			let total = 0;
			let checkedIds = [];
			let checkIndexs = [];
			let checkShopCarIds = {};
			let rebateTotal = 0; // 新增返利总额变量
			this.coupon = 0;
			let maxCouponValue = 0;

		 	// 判断最大的优惠券值
			this.dataList.forEach((item) => {
				if (item.checked && item.user_coupon_list && item.user_coupon_list.length > 0) {
					// 商品价格
					let itemPrice = Number(item.online_price);
					item.user_coupon_list.forEach((couponItem) => {
						// 判断商品价格是否满足优惠券使用门槛
						if (
							couponItem.reduce_money &&
							Number(couponItem.reduce_money) > maxCouponValue &&
							(!couponItem.need_money || itemPrice >= Number(couponItem.need_money))
						) {
							maxCouponValue = Number(couponItem.reduce_money);
						}
					});
				}
			});
			// 赋值优惠券
			this.coupon = maxCouponValue;

			this.dataList.forEach((item, index) => {
				if (item.checked) {
					checkedIds.push(item.id);
					checkShopCarIds[item.id] = true;
					checkIndexs.unshift(index);
					let price = item.online_price;
					let discount = 1;
					let rebate = item.rebate || 0; // 获取商品返利金额
					if (this.$store.userInfo.type == 2 && item.plus_mem_status == 1 && item.plus_price !== null) {
						price = item.plus_price;
					} else if (this.$store.userInfo.type != 1) {
						discount = item.vip_online_state == 1 ? this.vipDiscount : 1;
						if (item.shop_mem_status == 1 && item.shop_mem_price !== null) {
							price = item.shop_mem_price;
						}
					}
					
					total = toDecimal(toDecimal(toDecimal(price * discount) * item.num) + total);
					rebateTotal = toDecimal(toDecimal(rebate * item.num) + rebateTotal); // 计算返利总额
				}
			})

			 // 从总价中减去优惠券值
			 if (maxCouponValue > 0) {
				total = toDecimal(total - maxCouponValue);
			}

			this.checkedCount = checkedIds.length;
			this.checkedIds = checkedIds;
			this.checkIndexs = checkIndexs;
			this.allChecked = this.checkedCount > 0 && this.checkedCount == this.count;
			if (this.dataList.length) {
				//防止初始化时被重置
				this.$store.merCheckShopCarIds = checkShopCarIds;
			}
			this.totalLength = checkedIds.length; // 计算结算数量
			this.rebateTotal = rebateTotal; // 保存返利总额到组件
			return total;
		},
		emptyImageUrl() {
			// return 'https://safood.supplyocta.com/Public/miniProgram/images/shopping-car-empty-bg.png'	
			return this.$store.image_header + 'shopping-car-empty-bg.png';
		},
		boxStyle() {
			let b = `--popup-content-bottom:${this.type == 1 ? (this.$store.bottomHeight + 110) : 0}rpx;`;
			return b + `height: calc(100vh - ${this.$store.statusBarHeight + 44}px)`;
		},
		footerStyle() {
			return this.type == 1 ? `height:calc(124rpx + var(--tabbar-height))` :
				`height: ${124 + this.$store.bottomHeight}rpx;padding-bottom:${this.$store.bottomHeight}rpx`;
		},
	},
	async created() {
		await this.$onLaunched;
		this.userInfo = {
			...app.XcxData.userInfo
		};
	},
	methods: {
		async onShows() {
			await this.$onLaunched;
			this.getVipDisCount();
			this.getDataList();
		},
		//点击去逛逛，返回首页
		toHome() {
			uni.reLaunch({
				url: '/pages/mer/tabbar/home/home'
			})
		},
		//查看商品详情
		toDetail(id) {
			uni.navigateTo({
				url: '/pages/mer/goods/details/details?id=' + id
			});
		},
		//点击添加购物车
		async addToCar(index) {
			if (this.goodsList[index].attribute == 2) {
				this.goods = {
					...this.goodsList[index],
					goods_image: this.goodsList[index].path,
					goods_num: 999,
				};
				this.sku.btnText = '加入购物车';
				this.sku.showChangeNum = true;
				this.showSelectSku = true;
			} else {
				const res = await this.$mutations.setShoppingCar({
					goods_id: this.goodsList[index].goods_id,
					num: 1,
				}, 1)
				if (res) {
					this.showSelectSku = false;
					this.getDataList();
				}
			}
		},
		//点击管理、完成
		clickManage() {
			this.isManage = !this.isManage;
		},
		//修改选择状态
		changeAllCheck(val) {
			this.dataList.forEach((item) => {
				item.checked = val;
			})
			if (!this.allChecked) {
				this.$store.checkedList = []
			}

		},
		handlerRadio(val) {
			this.$store.checkedList = this.$store.checkedList.filter(item => item.goods_id !== val.goods_id);
		},
		//关闭规格弹窗
		closeSku(data) {
			this.showSelectSku = false;
			if (this.dataList.length && data) {
				let obj = {
					...this.dataList[this.changeSkuIndex],
					sku_id_list: data.sku_id_list,
					sku_id: data.sku_id,
					sku_name: data.sku_name,
					online_price: data.online_price,
					shop_mem_price: data.shop_mem_price,
					plus_price: data.plus_price,
					path: data.image,
				};
				//查找购物车中是否含有相同规格的商品
				let index = this.dataList.findIndex(item => item.id != obj.id && item.goods_id == obj.goods_id && (!item.sku_id || item.sku_id == obj.sku_id));
				if (index >= 0) {
					//合并购物车
					let oldItem = {
						...this.dataList[index],
						num: toDecimal(this.dataList[index].num * 1 + obj.num),
					};
					this.$set(this.dataList, index, oldItem);
					this.dataList.splice(this.changeSkuIndex, 1);
					this.count--;
					this.updateStoreCar();
				} else {
					this.$set(this.dataList, this.changeSkuIndex, obj);
				}
				this.$forceUpdate();
			} else {
				this.getDataList();
			}
		},
		//更新全局购物车
		updateStoreCar() {
			let goodsList = [];
			this.dataList.forEach(item => {
				goodsList.push({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num
				})
			})
			this.$store.merShoppingGoodsList = goodsList;
		},
		//点击修改规格
		async changeSku(index) {
			this.changeSkuIndex = index;
			this.goods = {
				...this.dataList[index],
				goods_image: this.dataList[index].path,
				goods_num: 999,
			};
			this.sku.btnText = '确定';
			this.sku.showChangeNum = false;
			this.showSelectSku = true;
		},
		//减少数量
		setDec(index) {
			if (this.dataList[index].num === 1) {
				this.toDel(index);
			}
			if (this.dataList[index].num > 1) {
				let item = {
					...this.dataList[index]
				};
				item.num--;
				this.$set(this.dataList, index, item);
				this.$mutations.setShoppingCar({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num,
				})
			}
		},
		//输入框失焦
		inputBlur(e, index) {
			let item = {
				...this.dataList[index]
			};
			if (e.detail.value == '') {
				item.num = 1;
			}
			this.$set(this.dataList, index, item);
			this.$mutations.setShoppingCar({
				id: item.id,
				goods_id: item.goods_id,
				sku_id: item.sku_id,
				num: item.num,
			})
		},
		//增加数量
		async setInc(index) {
			let item = {
				...this.dataList[index]
			};
			this.$set(this.dataList, index, item);
			const status = await this.$mutations.setShoppingCar({
				id: item.id,
				goods_id: item.goods_id,
				sku_id: item.sku_id,
				num: item.num + 1
			})
			if (status) {
				item.num++;
			}
		},
		//开始移动
		touchStart(e, id) {
			if (this.isManage) return;
			this.moveId = id;
			this.moveWidth = 0;
			if (e.touches.length == 1) {
				this.moveStartX = e.touches[0].clientX;
				this.moveStartY = e.touches[0].clientY;
			}
		},
		//移动中
		touchMove(e) {
			if (this.isManage) return;
			if (e.touches.length == 1) {
				// let x = this.moveStartX - e.touches[0].clientX;
				let x = (this.moveStartX - e.touches[0].clientX) * 5.5;
				let y = this.moveStartY - e.touches[0].clientY;

				if (y > 50 || y < -50) return this.moveWidth = 0, this.moveStartY; //纵向移动就撤回
				// if (y > 20 || y < -20) return this.moveWidth = 0, this.moveStartY; //纵向移动就撤回

				if (x <= 0) {
					x = 0
				} else if (x > this.delBtnWidth) {
					x = this.delBtnWidth;
				}

				this.moveWidth = x;
			}
		},
		//去结算
		toSettlement() {
			if (!this.checkedCount) return uni.showToast({
				title: '未选择商品',
				duration: 800,
				icon: 'none'
			})
			uni.navigateTo({
				url: '/pages/mer/order/settlement/settlement?ids=' + JSON.stringify(this.checkedIds),
			})
		},
		//删除单个商品
		async toDel(index) {
			if (this.dataList[index] && this.dataList[index].id) {
				const res = await this.submitDel([this.dataList[index].id]);
				if (!res) return;

				let idToFind = this.dataList[index].id;

				this.dataList.splice(index, 1);

				let i = this.$store.merShoppingGoodsList.findIndex(
					item => item && item.id === idToFind);
				if (i > -1) {
					this.$store.merShoppingGoodsList.splice(i, 1);
					this.count--;
				}

				if (!this.dataList.length && !this.goodsList.length) {
					this.refreshGoods();
				}
			}
		},
		//删除多个商品
		async delGoods() {
			if (!this.checkedCount) return uni.showToast({
				title: '未选择商品',
				duration: 800,
				icon: 'none'
			})
			const res = await this.submitDel(this.checkedIds);
			if (!res) return;

			//删除购物车中的数据
			for (let i in this.checkIndexs) {
				this.dataList.splice(this.checkIndexs[i], 1);
			}
			//删除全局购物车中的数据
			let len = this.$store.merShoppingGoodsList.length;
			for (let i = len - 1; i >= 0; i--) {
				if (this.checkedIds.indexOf(this.$store.merShoppingGoodsList[i].id) != -1) {
					this.$store.merShoppingGoodsList.splice(i, 1);
				}
			}
			this.count = this.dataList.length;
			if (!this.dataList.length && !this.goodsList.length) {
				this.refreshGoods();
			}
		},
		//提交删除商品
		submitDel(ids) {
			return new Promise(resolve => {
				uni.showModal({
					title: '温馨提示',
					content: '确认将这' + ids.length + '个商品从购物车中删除？',
					confirmText: '删除',
					cancelText: '取消',
					success: async (res) => {
						if (!res.confirm) return resolve(false);
						const {
							status,
							data,
							message
						} = await this.$request('SmallProgramApi/Shopping/deleteShopping_v1', {
							id: JSON.stringify(ids),
							store_id: this.$store.mallStoreId,
						});
						if (status == 1) {
							uni.showToast({
								title: message,
								duration: 800,
							})
							resolve(true)
						} else {
							uni.showToast({
								title: message,
								duration: 800,
								icon: 'none'
							})
							resolve(false)
						}
					}
				})
			})
		},
		//获取会员折扣
		async getVipDisCount() {
			if (this.$store.userInfo.type == 1) return this.vipDiscount = 1;
			const {
				status,
				data
			} = await this.$request('SmallProgramApi/Vip/getVipDetails');
			if (status == 1) {
				this.vipDiscount = data.discount;
				this.user_type = data.user_type;
			}
		},
		// 展示plus会员价条件
		showPlusPrice(item) {
			return app.showPlusPrice(item)
		},
		// 展示会员价条件
		showVipPrice(item) {
			return app.showVipPrice(item)
		},
		// 展示普通价格
		showOnlinePrice(item) {
			return app.showOnlinePrice(item)
		},
		//下拉刷新
		async pullDownRefresh() {
			this.isRefresh = true;
			await this.getDataList();
			this.isRefresh = false;
			uni.showToast({
				title: '刷新成功',
				duration: 800
			})
		},
		//获取购物车列表
		async getDataList() {
			const {
				status,
				data: {
					list,
					count
				},
				message
			} = await this.$request('SmallProgramApi/Shopping/getShoppingGoods_v4', { store_id: this.$store.mallStoreId })
			if (status != 1) return;

			this.count = count;

			//设置全局购物车的数据
			let goodsList = [];
			let checkShopCarIds = this.$store.merCheckShopCarIds;
			list.forEach(item => {
				item.checked = checkShopCarIds[item.id] ? true : false;
				goodsList.push({
					id: item.id,
					goods_id: item.goods_id,
					sku_id: item.sku_id,
					num: item.num
				})
			})
			this.dataList = list;
			this.$store.merShoppingGoodsList = goodsList;
			this.dataList.forEach((item) => {
				let matchedItem = this.$store.checkedList.find(
					(el) => el.goods_id === item.goods_id
				);
				if (matchedItem) {
					item.checked = true
				}
			});

			this.isLoadCarGoods = true;
			if (!list.length) {
				this.refreshGoods();
			}
		},
		//获取商品
		refreshGoods() {
			this.goodsForm.page = 1;
			this.getGoodsList();
		},
		//获取推荐商品数据
		async getGoodsList() {
			if (this.isLoading || !this.canLoad) return;
			this.isLoading = true;
			const {
				status,
				data
			} = await this.$request('SmallProgramApi/MerchantGoods/getRecommendGoodsList', {
				page: this.goodsForm.page,
				limit: this.goodsForm.limit,
			});
			if (status == 1) {
				if (this.goodsForm.page == 1) {
					this.goodsList = data.list;
				} else {
					this.goodsList.push.apply(this.goodsList, data.list);
				}
				this.goodsForm.page++;
				this.isLoading = false;
				this.canLoad = this.goodsList.length < data.count * 1 ? true : false;
			}
		},
	},
}
</script>

<style lang="scss">
.temperature-box {
	background-color: #C39646;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	color: #FFFFFF;
	/* 白色文字 */
	font-size: 20rpx;
	/* 文字大小 */
	margin-top: 16rpx;
	height: 28rpx;
	text-align: center;
	padding: 5rpx;
	line-height: 28rpx;
}

.car-box {
	background-color: #F8F8F8;

	.car-top-box {
		height: 76rpx;
		padding: 0 20rpx;

		.car-top__left {
			font-size: 28rpx;
			line-height: 36rpx;
			color: #666666;
		}

		.car-top__right {
			font-size: 28rpx;
			color: #333333;
			line-height: 36rpx;

			text:nth-child(2) {
				margin-left: 12rpx;
			}
		}
	}

	.car-goods-content {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 20rpx 20rpx;
		overflow: hidden;

		.car-goods-list {
			padding: 30rpx 20rpx 30rpx 0;
			border-bottom: 1rpx solid #F0F0F0;
			position: relative;
			width: 100%;
			box-sizing: border-box;
			transition: 0.1s;

			&:nth-last-child(1) {
				border-bottom: none;
			}

			.car-goods-list__right {
				margin-left: 16rpx;
				min-height: 200rpx;

				.car-goods-list__name {
					font-size: 28rpx;
					line-height: 52rpx;
					color: #333333;
					font-weight: 500;
				}

				.car-goods-list__sku-box {
					height: 46rpx;
					margin-top: 2rpx;
					background-color: #F8F8F8;
					border-radius: 4rpx;
					font-size: 26rpx;
					line-height: 46rpx;
					color: #999999;
					padding: 0 20rpx 0 16rpx;

					.car-goods-list__sku-icon {
						font-size: 18rpx;
						margin-left: 20rpx;
					}
				}

				.car-goods-price-box {
					font-size: 28rpx;
					line-height: 36rpx;
					margin-top: 24rpx;

					&:nth-child(2) {
						margin-top: 8rpx;
					}

					.price-icon {
						font-size: 24rpx;
						margin-left: 10rpx
					}
				}

				.car-num-box {
					.car-num-icon {
						font-size: 18rpx;
						color: #999999;
						padding: 10rpx;
					}

					.car-num-input {
						width: 70rpx;
						height: 42rpx;
						background-color: rgba(248, 248, 248, 0.39);
						border-radius: 4rpx;
						margin: 0 10rpx;
						font-size: 26rpx;
						line-height: 32rpx;
						text-align: center;
						color: #333333;
					}
				}

			}

			.car-goods-del {
				height: 100%;
				width: 136rpx;
				position: absolute;
				right: -136rpx;
				top: 0;
				font-size: 28rpx;
				line-height: 36rpx;
				background-color: #E3554B;
				color: #FFFFFF;
			}
		}
	}

	.car-footer-box {
		box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.05);
		height: 124rpx;
		padding: 0 24rpx 0 20rpx;
		background-color: #FFFFFF;
		z-index: 1;
		box-sizing: border-box;

		.car-footer__check-text {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #999999;

			&.checked {
				color: #333333;
			}
		}

		.car-footer-text {
			font-size: 26rpx;
			line-height: 30rpx;
			color: #333333;

			.price {
				color: #FF3D3D;
			}
		}

		.car-footer-price {
			font-size: 36rpx;
			line-height: 36rpx;
			font-weight: 600;
			color: #FF3D3D;
		}

		.car-footer-btn {
			width: 200rpx;
			height: 60rpx;
			border-radius: 38rpx;
			background-color: var(--primary-color);
			
			font-size: 28rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 20rpx;

			&.disabled {
				background-color: #BBBBBB;
			}
		}
	}

	.goods-list-box {
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 28rpx;

		.goods-item {
			width: 338rpx;
			margin-bottom: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			min-width: 40%;
			padding-bottom: 16rpx;
			border: 1rpx solid #F5F5F5;
			box-sizing: border-box;
			overflow: hidden;

			.goods-name {
				max-width: 100%;
				font-size: 28rpx;
				line-height: 36rpx;
				padding: 0 20rpx;
				margin: 8rpx 0 10rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				align-content: center;
			}

			.goods-price-box {
				font-size: 32rpx;
				line-height: 36rpx;
				margin-left: 20rpx;
			}

			.add-car-icon {
				color: var(--primary-color);
				font-size: 52rpx;
				margin-right: 20rpx;
				margin-bottom: 14rpx;
			}
		}
	}

	.empty-tip-box {
		width: 100%;
		height: 542rpx;
		padding-top: 16rpx;
		box-sizing: border-box;

		.car-empty-tip {
			font-size: 28rpx;
			line-height: 36rpx;
			margin-top: 22rpx;
			color: #333333;
		}

		.car-empty-sub-tip {
			font-size: 26rpx;
			line-height: 32rpx;
			margin-top: 20rpx;
			color: #999999;
		}

		.car-empty-btn {
			width: 212rpx;
			height: 68rpx;
			border-radius: 40rpx;
			background-color: var(--primary-color);
			font-size: 28rpx;
			line-height: 68rpx;
			text-align: center;
			margin-top: 38rpx;
			color: #FFFFFF;
		}
	}

	.car-empty-title {
		font-size: 28rpx;
		line-height: 36rpx;
		color: #333333;
		font-weight: 500;
		padding-left: 24rpx;
	}
}
</style>
